<template>
    <rx-layout style="padding:0 10px;box-sizing: border-box;">
        <template #middle>
            <rx-fit v-model="fitSearch">
                <template #head>
                    <div class="async-header">
                        <rx-list-title :title="i18n('list.asyncTasks','异步任务')"></rx-list-title>
                        <span class="search-btn-box">
                        <span class="search-btn" @click="searchshow">
                            <i class="iconfont iconguolv"></i>{{ $ti18('rxList.leachBtn', '过滤') }}
                        </span>
                    </span>
                    </div>
                </template>
                <template #search>
                    <rx-fit>
                        <template #middle>
                            <a-form layout="vertical">
                                <a-form-item :label="i18n('form.taskName','任务名称')">
                                    <a-input :placeholder="i18n('list.taskNamePlaceholder','请输入任务名称')"
                                             v-model:value="urlConfig.queryParam.Q_TASK_NAME__S_LK"/>
                                </a-form-item>
                            </a-form>
                            <div class="list-search-toolbar">
                                <a-button type="primary" @click="search">
                                    <SearchOutlined/>
                                    {{ $ti18('rxList.searchBtn', '查询') }}
                                </a-button>
                                <a-button style="margin-left: 4px" @click="resetSearch">
                                    {{ $ti18('rxList.resetBtn', '重置') }}
                                </a-button>
                            </div>
                        </template>
                    </rx-fit>
                </template>
                <template #middle>
                    <rx-grid
                        ref="table"
                        :hasPage="true"
                        :urlConfig="urlConfig"
                        :selectConfig="selectConfig"
                        :pageConfig="pageConfig"
                        url="/api-bpm/bpm/core/bpmAsyncTask/query"
                        field="id"
                        :columns="columns"
                    >
                        <template #isSuccess="{row,rowIndex}">
                            <a-tag :color="statusMap[row.isSuccess].color">
                                <span>{{ statusMap[row.isSuccess].text }}</span>
                            </a-tag>
                        </template>
                        <template #nodeName="{row,rowIndex}">
                            {{ $i18(row.nodeName, "节点名称") }}
                        </template>
                        <template #action="{ row, rowIndex }">
                            <RxGridAction :size="2">
                                <div @click="detail(row)">{{ $ti18('rxList.detailBtn', '明细') }}</div>
                                <div v-if="row.isSuccess!='RUNNING'" @click="delByIds([row.id])">
                                    {{ $ti18('rxList.delBtn', '删除') }}
                                </div>
                            </RxGridAction>
                        </template>
                    </rx-grid>
                </template>
            </rx-fit>
        </template>
    </rx-layout>
</template>

<script>
import BpmAsyncTaskApi from '@/common/api/bpm/bpmAsyncTask'
import BpmAsyncTaskEdit from './BpmAsyncTaskEdit.vue'
import {BaseList, RxFit} from '@lowcode/jpaas-base-lib';
import {App} from '@lowcode/jpaas-share-component';
import userUser from "@/stores/userUser";
import {mapState} from 'pinia';

export default {
    name: 'BpmAsyncTaskList',
    mixins: [BaseList, App],
    computed: {
        ...mapState(userUser, ['user'])
    },
    components: {
        RxFit
    },
    data() {
        return {
            urlConfig: {
                ajaxType: 'post',
                contentType: 'json',
                queryParam: {},
                dataField: 'result.data',
                totalField: 'result.totalCount'
            },
            selectConfig: {
                type: 'checkbox'
            },
            pageConfig: {
                pageSize: 10,
                pageSizes: [10, 30, 40]
            },
            columns: [
                {title: this.i18n('form.taskName', '任务名称'), field: 'taskName', minWidth: 200},
                {title: this.i18n('form.nodeName', '节点名称'), field: 'nodeName', minWidth: 100},
                {
                    title: this.i18n('form.isSuccess', '执行结果'),
                    field: 'isSuccess',
                    minWidth: 100,
                    slots: {default: 'isSuccess'}
                },
                {title: this.i18n('form.createTime', '执行时间'), field: 'createTime', minWidth: 60},
                {title: this.$ti18('rxList.action', '操作'), minWidth: 50, field: 'action', slots: {default: 'action'}}
            ],
            component: BpmAsyncTaskEdit,
            comment: this.i18n("list.comment", "异步任务记录"),
            widthHeight: ['800px', '420px'],
            fitSearch: false,
            statusMap: {
                "SUCCESS": {color: 'green', text: this.i18n("list.success", "成功")},
                "ERROR": {color: 'red', text: this.i18n("list.error", "失败")},
                "RUNNING": {color: 'blue', text: this.i18n("list.running", "运行中")},
            },
        }
    },
    created() {
        this.urlConfig.queryParam["Q_CREATE_BY__S_EQ"] = this.user.userId;
        let appId = this.curApp.appId;
        if (appId) {
            this.urlConfig.queryParam.Q_APP_ID__S_EQ = appId;
        }
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "BpmAsyncTask", key);
        },
        delById(ids) {
            return BpmAsyncTaskApi.del({ids: ids.join(',')});
        },
        resetSearch() {
            this.urlConfig.queryParam = {};
            this.urlConfig.queryParam["Q_CREATE_BY__S_EQ"] = this.user.userId;
            let appId = this.curApp.appId;
            if (appId) {
                this.urlConfig.queryParam.Q_APP_ID__S_EQ = appId;
            }
            this.$nextTick(() => {
                this.$refs['table'].loadData();
            })
        },

    }
}
</script>
<style scoped>
.table-operator {
    padding: 4px;
}

.table-operator button {
    margin: 2px;
}
.async-header{
    display: flex;
    justify-content: space-between;
}
</style>

